import { useIntersectionObserver } from "@vueuse/core";
import Sku from "@/components/XtxSku/index.vue";
import GoodsInfo from "@/components/GoodsInfo/index.vue";
import ImgeViews from "@/components/ImgeViews/index.vue";
// 自定义封装插件
/*
    导入 useIntersectionObserver 函数，该函数来自 @vueuse/core 模块。useIntersectionObserver 函数是 Vue.js 3 的一个新特性，用于实现图片懒加载。
定义 lazyPlugin 对象，该对象包含一个名为 install 的方法。install 方法接受一个参数 app，它是 Vue.js 应用程序实例。
在 install 方法中，使用 app.directive 方法注册一个名为 lazy-img 的自定义指令。这个指令用于在 Vue 模板中使用懒加载功能。
在指令的 mounted 钩子中，接收两个参数：el 和 binding。el 表示指令所绑定的元素，binding 是一个包含指令属性的对象。
使用 useIntersectionObserver 函数为 el 元素创建一个新的交集观察器。该函数接受两个参数：el 和一个回调函数。回调函数在图片与视口发生交集时被调用。
在回调函数中，接收一个名为 stop 的参数。stop 参数是一个函数，用于停止观察器的执行。
在回调函数中，检查 isIntersecting 属性是否为 true。如果是，说明图片已经与视口发生交集，可以加载图片了。将 binding.value（即图片的 URL）设置为 el.src，从而加载图片。
调用 stop() 函数，停止观察器的执行。这样可以释放资源，避免内存泄漏。
*/
export const lazyPlugin = {
  install(app) {
    app.directive("lazy-img", {
      mounted(el, binding) {
        const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
          if (isIntersecting) {
            el.src = binding.value;
            stop();
          }
        });
      },
    });
  },
};

export const componentsPlugin = {
  install(app) {
    app.component("GoodsInfo", GoodsInfo);
    app.component("ImgeViews", ImgeViews);
    app.component("xtxSku",Sku)
  },
};
